
<template>
	<view class="page_box">
		<u-navbar :is-back="true" title="意见反馈" v-if="1" :border-bottom="false"></u-navbar>

		<view class="content_box">
			<u-form :model="form" ref="uForm" class="form">
				
				<u-form-item :border-bottom="false" class="form-item" prop="casedescr">
					<view class="form-content">
						<view class="lable-box flex justify-between">
							<text class="form-lable">案例描述</text>			
							<text class="end-text">0/100</text>
						</view>
						<view class="form-data textarea-data">
							<textarea v-model="form.casedescr" placeholder-style="color:#C6C6C6" placeholder="请简单描述你的案例..." class="textarea"></textarea>
						</view>
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false" class="form-item">
					<view class="form-content ">
						<view class="lable-box flex justify-between">
							<text class="form-lable">上传图片</text>			
							<text class="end-text">最多9张</text>
						</view>
						<view class="form-data">
							<u-upload
								width="156"
								height="156"
								max-count="10"
								ref="uUpload"
								action="#"
								:auto-upload="auto_upload"
								upload-text=" "
							 ></u-upload>
						</view>
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false" class="form-item" prop="tel">
					<view class="form-content">
						<view class="lable-box flex">
							<text class="form-lable">联系方式</text>
						</view>
						<view class="form-data textarea-data" style="padding: 10rpx 22rpx;">
							<u-input v-model="form.tel" placeholder="留下联系方式，更快解决问题~" placeholderStyle="font-size: 26rpx;color: #c6c6c6;"></u-input>
						</view>
					</view>
				</u-form-item>
				<u-form-item :border-bottom="false" class="form-item">
					<view class="form-content flex-wrap border-bottom-none">
						<button class="circle-btn" @click="submit()">提交</button>
					</view>
				</u-form-item>
			</u-form>
		</view>

		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	
	</view>
</template>

<script>
export default {
	data() {
		return {
			form:{
				casedescr:'',				
				image:[],
				tel:'',
			},
			rules: {
				casedescr: [
					{
						required: true, 
						message: '填写您的意见反馈', 
						trigger: ['blur','change']
					}
				],
				tel: [
					{
						required: true, 
						message: '填写手机号', 
						trigger: 'blur'
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['blur'],
					}
				],
			},
			auto_upload:false,
		};
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onShow() {
		
	},
	onLoad(e) {},
	methods: {
		submit() {
			let files = []
			files = this.$refs.uUpload.lists;
			//console.log(files)
			this.$refs.uForm.validate(valid => {
				if (valid) {
					console.log(this.form);
					uni.showToast({
						title: '提交成功',
						icon:"none"
					});
				}
			});
		},
	}
};
</script>

<style lang="scss" scoped>
.page_box {

}

.content_box {
	.form{
		/deep/.u-form-item{
			padding: 0;
			line-height: 0;
		}
		.form-content{
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			padding: 40rpx 22rpx;
			.lable-box{
				line-height: 50rpx;
			}
			.form-lable{
				white-space: nowrap;
				margin-right: 30rpx;
				font-size: 30rpx;
				font-family: PingFang SC, PingFang SC-Medium;
			}
			.form-data{
				width: 100%;
				margin-top: 30rpx;
			}
			.end-text{
				font-size: 26rpx;
				color: #999999;
			}
			.textarea-data{
				padding: 0;
				overflow: hidden;
				background: #f7f7f7;
				border-radius: 20rpx;
				box-sizing: border-box;
				.textarea{
					height: 300rpx;		
					padding: 42rpx 28rpx;
					width: 100%;
				}
			}
			.circle-btn{
				background: #4a515b !important;
				color: #FFFFFF;
				border-radius: 45rpx;
				font-size: 30rpx;
				font-weight: 700;
				line-height: 90rpx;
				margin: 98rpx 0 50rpx;
				width: 100%;
				font-family: PingFang SC, PingFang SC-Bold;
			}
		}
	}
}
</style>
